<template>
  <div class="search">
    <!-- 搜索框 -->
    <form action="/">
      <van-search
        v-model="searchs"
        placeholder="请输入搜索关键词"
        show-action
        @search="onSearch(searchs)"
        @cancel="onCancel"
      />
    </form>
    <!-- 历史记录 -->
    <div class="history">
      <div class="title">
        <span class="search_history_left">搜索历史</span>
        <span class="search_history_right" @click="delectall">
          <i class="iconfont icon-delect"></i>
        </span>
      </div>
      <div class="history_list">
        <van-grid :border="false">
          <van-tag
            plain
            v-for="(item,index) in searchList"
            :key="index"
            @click="historyTab(index)"
          >{{item}}</van-tag>
        </van-grid>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchs: "", // 输入框的内容
      searchList: [] // 搜索后的历史数据
    };
  },
  methods: {
    // 返回上一个组件
    onCancel() {
      let path = sessionStorage.getItem("path");
      if (path == "index") {
        this.$router.push("/");
      } else if (path == "class") {
        this.$router.push("/class");
      }
    },
    // 确定输入内容
    onSearch(data) {
      // 不能为空
      if (this.searchs == "") {
        return this.$toast.fail("不能为空");
      }
      // 保存到浏览器
      this.searchList = JSON.parse(sessionStorage.getItem("history"));
      if (this.searchList == null) {
        this.searchList = [this.searchs];
        sessionStorage.setItem("history", JSON.stringify(this.searchList));
      } else {
        this.searchList.push(this.searchs);
        sessionStorage.setItem("history", JSON.stringify(this.searchList));
      }
      // 跳转路由
      this.$router.push({ path: "/end_search", query: { name: this.searchs } });
    },
    // 删除按钮
    delectall() {
      this.$dialog
        .confirm({
          title: "删除全部历史记录",
          message: "你确定要删除所有的历史浏览记录吗？"
        })
        .then(() => {
          let deleteList = JSON.parse(sessionStorage.getItem("history"));
          deleteList = [];
          sessionStorage.setItem("history", JSON.stringify(deleteList));
          this.searchList = [];
          this.$toast.success("删除成功");
        })
        .catch(() => {
          this.$toast.fail("取消成功");
        });
    },
    // 历史按钮
    historyTab(index) {
      this.searchs = this.searchList[index];
      this.onSearch(this.searchs);
    }
  },
  created() {
    let historysss = JSON.parse(sessionStorage.getItem("history"));
    if (historysss !== null) {
      this.searchList = historysss;
    }
    if (this.$route.query.name !== undefined) {
      sessionStorage.setItem("path", this.$route.query.name);
    }
  }
};
</script>

<style lang="less">
.search {
  .history {
    margin-top: 20px;
    .title {
      overflow: hidden;
      color: #999;
      .search_history_left {
        float: left;
        margin-left: 15px;
        font-size: 11px;
      }
      .search_history_right {
        float: right;
        margin-right: 15px;
      }
    }
  }
  .history_list {
    .van-grid {
      .van-tag {
        margin: 5px 10px;
      }
    }
  }
}
</style>